<template>
	<view>
		
		<block v-if="merchantId">
			<view class="bg">
				<view class="name">{{types == 1 ? user.merchantName :user.staffName}}</view>
				<view class="date">到期时间 {{types == 1 ? user.prescription : user.expirationTime}}</view>
				<view class="display-a">
					<image @click="exit()" class="img-45" src="../../static/45.png"></image>
					<view class="edit-pass" @click="handleApply()">修改密码</view>
				</view>
			</view>
			<view class="but" v-if="types == 2">
				<view @click="writeOffOpenPop()">核销</view>
			</view>
			<view class="list-public" v-if="types == 1">
				<view class="margin-bottom_30rpx">当前点数</view>
				<view class="display-a-js margin-bottom_30rpx">
					<view class="num">{{user.counts}}</view>
					<view class="record" @click="record()">使用记录</view>
				</view>
				<view class="display-a color_A1A1A1">
					<view>今日使用 {{user.useToday}}</view>
					<view class="line"></view>
					<view>累计使用 {{user.cumulativeUse}}</view>
				</view>
			</view>
			<view class="display-a" v-if="types == 1">
				<image @click="release(1)" class="img-5" src="../../static/5.png"></image>
				<image @click="release(2)" class="img-5" src="../../static/6.png"></image>
				<image @click="release(4)" class="img-5" src="../../static/7.png"></image>
			</view>
			<view class="font-size_32rpx margin-left_30rpx">活动列表</view>
			<view class="list display-fw-a">
				<view @click="getList(1)">
					<image class="img-8" src="../../static/8.png"></image>
					<view>超级快推</view>
				</view>
				<view @click="getList(2)">
					<image class="img-8" src="../../static/9.png"></image>
					<view>幸运大转盘</view>
				</view>
				<view @click="getList(3)">
					<image class="img-8" src="../../static/10.png"></image>
					<view>幸运九宫格</view>
				</view>
				<view @click="getList(4)">
					<image class="img-8" src="../../static/11.png"></image>
					<view>卡券活动</view>
				</view>
				<view @click="getList(5)">
					<image class="img-8" src="../../static/41.png"></image>
					<view>线下转盘</view>
				</view>
			</view>
			<block v-if="list.length > 0">
				<view class="font-size_32rpx margin-left_30rpx">最新活动</view>
				<view class="list-public" style="padding: 0;margin-top: 20rpx;" v-for="(item,index) in list" :key="index">
					<view class="name2">{{item.activityName}}</view>
					<view class="display-a-js color_757575" style="padding: 0 40rpx 10rpx;position: relative;">
						<view v-if="item.activityType == 1">有效时间：{{types == 1 ? user.prescription : user.expirationTime}}
						</view>
						<view v-if="item.activityType == 4">有效时间：{{item.cardsettings.validTime}}</view>
						<view v-if="item.activityType == 2 || item.activityType == 3 || item.activityType == 5">
							有效时间：{{item.validTime}}</view>
						<image @click="openPop(item)" v-if="types == 1" class="img-14" src="../../static/14.png"></image>
					</view>
					<view class="padding-bottom_30rpx p-bo" v-if="item.releaseChannel ==2">
					</view>
					<view class="display-a padding_30rpx_0 color_757575 p-bo" v-if="item.releaseChannel == 1 || item.releaseChannel == 3">
						<view class="text-align_center">
							<view class="font-weight_bold font-size_30rpx margin-bottom_10rpx">{{item.likeCount}}</view>
							<view>点赞次数</view>
						</view>
						<view class="line"></view>
						<view class="text-align_center">
							<view class="font-weight_bold font-size_30rpx margin-bottom_10rpx">{{item.commentCount}}</view>
							<view>评论次数</view>
						</view>
						<view class="line"></view>
						<view class="text-align_center">
							<view class="font-weight_bold font-size_30rpx margin-bottom_10rpx">{{item.viewCount}}</view>
							<view>播放次数</view>
						</view>
						<!-- <view class="line"></view>
						<view class="text-align_center">
							<view class="font-weight_bold font-size_30rpx margin-bottom_10rpx">{{item.viewCount}}</view>
							<view>转发次数</view>
						</view> -->
					</view>
					<block v-if="item.releaseChannel == 2">
						<view class="padding-bottom_20rpx" v-if="item.activityType == 5"></view>
						<view class="display-a" v-if="item.activityType == 2 || item.activityType == 3">
							<!-- <view class="preview" style="width: 234rpx;" @click="previewPush(item.id,item.activityType)">
								预览活动</view>
							<view class="preview-line"></view> -->
							<view class="preview"  @click="winning(item.id)">中奖名单</view>
							<view class="preview-line"></view>
							<view class="preview" @click="openQrCode(item.id,item.qrcode,item.releaseChannel,item.merchantId)">活动二维码</view>
						</view>
						<view class="display-a" v-if="item.activityType == 1 || item.activityType == 4">
							<!-- <view class="preview" @click="previewPush(item.id,item.activityType)">预览活动</view>
							<view class="preview-line"></view> -->
							<view class="preview" style="width: 710rpx;" @click="openQrCode(item.id,item.qrcode,item.releaseChannel,item.merchantId)">活动二维码</view>
						</view>
					</block>
					<block v-if="item.releaseChannel == 1 || item.releaseChannel == 3">
						<!-- <view class="padding-bottom_20rpx" v-if="item.activityType == 5"></view> -->
						<view class="display-a" v-if="item.activityType == 1 || item.activityType == 4 || item.activityType == 5">
							<view class="preview" style="width: 234rpx;" @click="previewPush(item.id,item.activityType)">
								预览活动</view>
							<view class="preview-line"></view>
							<view class="preview" style="width: 234rpx;" @click="userData(item.id)">用户数据</view>
							<view class="preview-line"></view>
							<view class="preview" style="width: 234rpx;"
								@click="openQrCode(item.id,item.qrcode,item.releaseChannel,item.merchantId)">活动二维码</view>
						</view>
						<view class="display-a" v-if="item.activityType == 2 || item.activityType == 3">
							<view class="preview" style="width: 174rpx;" @click="previewPush(item.id,item.activityType)">
								预览活动</view>
							<view class="preview-line"></view>
							<view class="preview" style="width: 174rpx;" @click="winning(item.id)">中奖名单</view>
							<view class="preview-line"></view>
							<view class="preview" style="width: 174rpx;" @click="userData(item.id)">用户数据</view>
							<view class="preview-line"></view>
			
							<view class="preview" style="width: 174rpx;"
								@click="openQrCode(item.id,item.qrcode,item.releaseChannel,item.merchantId)">活动二维码</view>
						</view>
					</block>
				</view>
			</block>
		</block>
		<block v-else>
			
		</block>
		
		<sunui-popup ref="pop2">
			<template v-slot:content>
				<view style="padding: 40rpx;">
					<view class="text-align_center font-size_32rpx margin-bottom_30rpx font-weight_bold" style="width: 580rpx;">修改密码</view>
					<view class="display-a padding_20rpx_0">
						<view style="width: 130rpx;">登录账号</view>
						<view class="margin-left_20rpx">{{user.merchantCode}}</view>
					</view>
					<view class="display-a padding_20rpx_0">
						<view style="width: 130rpx;">新密码</view>
						<input type="safe-password" class="margin-left_20rpx" style="width: 360rpx;" v-model="newPass" placeholder="请输入新密码" placeholder-class="placeholder" />
					</view>
				</view>
			</template>
		</sunui-popup>
		
		<sunui-popup ref="pop">
			<template v-slot:content>
				<image class="qrcode" :src="qrcode"></image>
				<view class="tips">请长按二维码保存到手机</view>
			</template>
		</sunui-popup>

		<sunui-popup ref="pop3">
			<template v-slot:content>
				<view class="padding_40rpx p-bo" @click="updata()">修改</view>
				<view class="padding_40rpx p-bo" @click="del()">删除</view>
				<view class="padding_40rpx color_FF0000" @click="closePop()">取消</view>
			</template>
		</sunui-popup>

		<sunui-popup ref="pop5">
			<template v-slot:content>
				<vcode-input ref="VcodeInput" @vcodeInput="vcodeInput"></vcode-input>
			</template>
		</sunui-popup>



	</view>
</template>

<script>
	import VcodeInput from '@/components/vcode-input/vcode-input'
	export default {
		components: {
			VcodeInput
		},
		data() {
			return {

				user: {},
				currObj: {}, //选中的活动
				types: '', //1管理员 2员工
				list: [],
				qrcode: '',
				
				newPass: '', //新密码
				
				merchantId: '',
			}
		},

		onLoad() {
			this.types = uni.getStorageSync('types');
		},

		onShow() {
			
			this.merchantId = uni.getStorageSync('merchantId');
			
			this.getInfo();
		},

		methods: {
			
			//修改密码
			handleApply() {
				this.$refs.pop2.show({
					shadeClose: false,
					style: 'background-color:#fff;width:660rpx;border-radius:10rpx;',
					btns: [{
							text: '取消',
							onTap: () => {
								this.newPass = '';
								this.$refs.pop2.close();
							}
						},
						{
							text: '确认修改',
							onTap: async () => {
					
								if (!this.newPass) {
									this.$sun.toast("请输入新密码", "none");
									return;
								}
								const result = await this.$http.post({
									url: this.$api.ydResetPasswords,
									data: {
										userId: '',
										merchantPassword: this.newPass,
										merchantCode: this.user.merchantCode,
										id: this.user.id
									}
								});
								if (result.code == 2000) {
									this.$refs.pop2.close();
									this.$sun.toast('密码修改成功');
								} else {
									this.$sun.toast(result.msg, 'none');
								}
							}
						}
					]
				});
			},
			
			//核销
			writeOffClosePop() {
				this.$refs.pop5.close();
			},
			writeOffOpenPop() {
				this.$refs.pop5.show({
					style: 'background-color:#fff;width:750rpx;text-align:center;height:auto;overflow-x:auto;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;',
					anim: 'bottom',
					position: 'bottom',
					topclose: false,
				});
			},

			// 用户输入的值
			vcodeInput(val) {
				// this.mobileText = val;
			},
			// 控制组件获取焦点
			setFocus() {
				this.$refs.VcodeInput.setFocus();
			},
			// 控制组件失去焦点
			setBlur() {
				this.$refs.VcodeInput.setBlur();
			},
			// 清除已输入
			clearValue() {
				this.$refs.VcodeInput.clearValue();
			},

			//二维码
			openQrCode(id, code, type,merchantId) {
				console.log(id, code, type)
				if (type == 2) {
					uni.navigateTo({
						url: '/pages/index/videoCode?id=' + id + '&merchantId='+merchantId
					})
				} else {

					this.qrcode = code;
					console.log(this.qrcode)
					this.$refs.pop.show({
						style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:50rpx;',
						bottomClose: true,
					});
				}
			},

			//中奖名单
			winning(id) {
				uni.navigateTo({
					url: '/pages/index/winning?id=' + id
				})
			},

			//修改活动
			updata() {
				this.closePop();
				uni.navigateTo({
					url: '/pages/index/release?type=' + this.currObj.activityType + '&id=' + this.currObj.id
				})
			},

			//活动数据
			userData(id) {
				uni.navigateTo({
					url: '/pages/index/userData?id='+id
				})

			},

			//预览活动
			previewPush(id, type) {
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/index/previewPush?id=' + id
					})
				}
				if (type == 2) {
					uni.navigateTo({
						url: '/pages/index/previewTurntable?id=' + id
					})
				}
				if (type == 3) {
					uni.navigateTo({
						url: '/pages/index/previewSquared?id=' + id
					})
				}
				if (type == 4) {
					uni.navigateTo({
						url: '/pages/index/previewCoupon?id=' + id
					})
				}
			},

			//删除活动
			del() {
				this.closePop();
				uni.showModal({
					title: '提示',
					content: '确认删除 ' + this.currObj.activityName + ' 活动?',
					success: async (res) => {
						if (res.confirm) {
							const result = await this.$http.get({
								url: this.$api.delete,
								data: {
									id: this.currObj.id,
								}
							});
							if (result.code == 2000) {
								console.log(result);
								uni.showToast({
									title: '活动删除成功',
									duration: 2000,
								});
								setTimeout(() => {
									this.getActivityList();
								}, 2000);
							} else {
								uni.showToast({
									title: result.msg,
									duration: 2000,
									success: (res) => {

									}
								});
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			closePop() {
				this.$refs.pop3.close();
			},

			//删除弹窗
			openPop(obj) {
				this.currObj = obj;
				this.$refs.pop3.show({
					style: 'background-color:#fff;width:750rpx;text-align:center;height:auto;overflow-x:auto;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;',
					anim: 'bottom',
					position: 'bottom',
					topclose: false,
				});
			},

			// selFlag(id,index) {
			// 	this.list[index].flag = !this.list[index].flag;
			// 	this.id = id;
			// },

			async getActivityList() {
				const result = await this.$http.post({
					url: this.$api.getActivity,
					data: {
						id: uni.getStorageSync('merchantId'),
						// types: uni.getStorageSync('types'),
						activityType: '',
						releaseChannel: '',
						page: 1,
						limit: 1,
					}
				});
				if (result.code == 2000) {
					this.list = result.data.list;
				}
			},
			
			exit() {
				uni.removeStorageSync("merchantId");
				uni.reLaunch({
					url: '/pages/index/login'
				})
			},
			
			async getInfo() {
				if (!uni.getStorageSync('merchantId')) {
					uni.showModal({
						title: '登录提示',
						content: '请先登录',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/index/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				const result = await this.$http.post({
					url: this.$api.selectId,
					data: {
						id: uni.getStorageSync('merchantId'),
						types: uni.getStorageSync('types')
					}
				});
				if (result.code == 2000) {
					this.user = result.data;
					this.types == 1 ?  this.$sun.title(this.user.merchantName) : this.$sun.title(this.user.staffName)
					
					if (uni.getStorageSync('types') == 1) {
						uni.setStorageSync("merchantCode", this.user.merchantCode);
					}
					this.getActivityList();
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},

			release(type) {
				uni.navigateTo({
					url: '/pages/index/release?type=' + type
				})
			},

			//使用记录
			record() {
				uni.navigateTo({
					url: '/pages/index/record'
				})
			},

			//活动列表
			getList(type) {

				let time = this.types == 1 ? this.user.prescription : this.user.expirationTime;

				uni.navigateTo({
					url: '/pages/index/list?type=' + type + '&time=' + time
				})
			},

		}
	}
</script>

<style lang="scss">
	
	.edit-pass {
		padding: 6rpx 14rpx;
		margin-left: 20rpx;
		color: #FFFFFF;
		border: 1px solid #FFFFFF;
		border-radius: 10rpx;
		font-size: 26rpx;
	}
	
	.img-45 {
		width: 144rpx;
		height: 44rpx;
		margin-left: 50rpx;
	}
	
	.padding_40rpx {
		padding: 40rpx 20rpx;
	}

	.tips {
		width: 500rpx;
		text-align: center;
		color: #999999;
	}

	.but {
		width: 530rpx;
		background: linear-gradient(356.17deg, #1E6CEB -3.6%, #6568F6 88.06%);
		box-shadow: 0px 4px 4px rgba(78, 41, 210, 0.5);
		border-radius: 100rpx;
		padding: 24rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		margin: -160rpx 110rpx 80rpx;
	}

	.color_6568F6 {
		font-size: 30rpx;
		padding: 34rpx 0 30rpx;
	}

	.padding_30rpx_0 {
		padding: 44rpx 0;
	}

	.img-15 {
		width: 180rpx;
		height: 166rpx;
		position: absolute;
		z-index: 9;
		right: 20rpx;
		top: 36rpx;
		background: url('~static/15.png');
		background-repeat: no-repeat;
		background-size: contain;
		text-align: center;
	}

	.preview-line {
		width: 2rpx;
		background-color: #EEEEEF;
		height: 102rpx;
	}

	.preview {
		width: 354rpx;
		color: #6568F6;
		font-size: 32rpx;
		text-align: center;
		margin: 30rpx 0;
	}

	.line2 {
		width: 2rpx;
		height: 54rpx;
		background-color: #EEEEEF;
	}

	.img-14 {
		width: 46.8rpx;
		height: 10.8rpx;
	}

	.text-align_center {
		width: 206rpx;
		// width: 144rpx;
	}

	.name2 {
		padding: 30rpx 40rpx 26rpx;
		font-weight: bold;
		font-size: 30rpx;
	}

	.img-8 {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
	}

	.list {
		width: 710rpx;
		background-color: #FFFFFF;
		padding: 26rpx 0 6rpx;
		margin: 24rpx 20rpx 30rpx;
		border-radius: 10rpx;

		view {
			width: 177.5rpx;
			text-align: center;
			margin-bottom: 10rpx;
		}
	}

	.img-5 {
		width: 236rpx;
		height: 228rpx;
		margin-bottom: 30rpx;
		margin-left: 10rpx;
	}

	.line {
		width: 4rpx;
		height: 20rpx;
		background-color: #A1A1A1;
		margin: 0 20rpx;
	}

	.num {
		background: linear-gradient(180deg, #8C68FF 0%, #1E6CEB 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
		font-size: 64rpx;
		font-weight: bold;
	}

	.record {
		width: 152rpx;
		text-align: center;
		background-color: #6568F6;
		padding: 14rpx;
		color: #FFFFFF;
		border-radius: 100rpx;
		font-size: 26rpx;
	}

	.list-public {
		padding: 30rpx 30rpx 30rpx 44rpx;
		margin-bottom: 30rpx;
		margin-top: -160rpx;
	}

	.date {
		color: #FFFFFF;
		margin-left: 50rpx;
		margin-bottom: 14rpx;
	}

	.name {
		font-size: 40rpx;
		margin-bottom: 20rpx;
		margin-left: 50rpx;
		color: #FFFFFF;
	}

	.bg {
		width: 750rpx;
		height: 390rpx;
		background: url('~static/4.png');
		background-repeat: no-repeat;
		background-size: contain;
		padding-top: 38rpx;
	}

	page {
		padding-bottom: 2rpx;
	}
</style>